<template>
	<skeleton :skeleton="{name:'history'}" :showSkeleton="showSkeleton">
		<block slot="content">
			<noData :showErrorTip="noData">
				<view slot="content">
					<exam-rank-item v-for="(item,index) in rankList" :itemData="item" :key='index'></exam-rank-item>
					<view v-if="noMore" class="no-more">没有更多了</view>
				</view>
			</noData>
		</block>
	</skeleton>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	import ExamRankItem from './fragments/ExamRankItem';
	import ReportService from '@/services/report/index';
	const reportService = new ReportService();
	export default {
		components: {
			ExamRankItem
		},
		data() {
			return {
				userId: undefined,
				ascription: undefined,
				pageNum: 1,
				pageSize: 20,
				noMore: false,
				showSkeleton: true,
				noData: false,
				rankList: [],
			}
		},
		onLoad(query) {
			this.userId = query.userId;
			this.ascription = query.ascription;
			this.loadData(1);
		},
		onPullDownRefresh() {
			this.loadData(1);
		},
		onReachBottom() {
			this.loadData(this.pageNum + 1);
		},
		methods: {
			loadData(pageNum) {
				const param = {
					pageSize: this.pageSize,
					pageNum: pageNum,
					id: this.userId,
					ascription: this.ascription
				}
				reportService.examRank(param).then((response) => {
					uni.stopPullDownRefresh();
					if (response.success) {
						if (pageNum == 1) {
							this.noData = isEmpty(response.result.list);
							this.rankList = response.result.list;
							this.noMore = false;
						} else {
							this.noData = false;
							this.noMore = response.result.list.length < this.pageSize
							this.rankList = [...this.rankList, ...response.result.list];
						}
						console.log('rankPage',this.noData);
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-more {
		text-align: center;
		font-size: 24upx;
		color: #333333;
		height: 60upx;
		line-height: 60upx;
	}
</style>
